<template>
<!--  -->
  <van-popup :show="isShow" @close="onClose" round position='bottom' custom-style="background: #fff">
    <view class="wrapper">
      <view class="title">更改设置</view>
      <image v-if="isClose" class="close" @click="onClose" src="https://magic.mirror.source.axeastro.com/magic-mirror/close.png"></image>
      <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar_img" mode="aspectFill"
          :src="userInfo.avatar || 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'" />
      </button>
      <view class="txt">修改头像</view>
      <view class="input flex-r">
        <text class="a">昵称</text>
        <input type="nickname" :maxlength="10" v-model="userInfo.nick_name" class="flex1 input_txt" @blur="userNameInput" placeholder="请输入昵称" />
      </view>
      <DatePicker @on-success="e => userInfo.birthday = e">
        <view class="input flex-r pt-16">
          <text class="a">出生日期</text>
          <view class="birth flex1 flex-r">
            {{ userInfo.birthday }}
            <!-- <input type="text" class="input_txt" :maxlength="10" placeholder="请选择出生日期" @input="onChangeBirth" v-model="userInfo.birthday"> -->
          </view>
        </view>
      </DatePicker>
      <view class="btn" @click="onSubmit">保存</view>
    </view>
  </van-popup>
</template>
<script>
import { postUserUpdate } from '@/api'
import { uploadSync } from '@/utils/upload'
import { inputBirthday } from '@/mixins/birthday';

import DatePicker from '@/components/v2/datePicker.vue'

export default {
  components: { DatePicker },
  mixins:[ inputBirthday ],
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    isClose: {
      type: Boolean,
      default: true
    },
    edit: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      autoUpdate: false,
      userInfo: {
        nick_name: '',
        avatar: '',
        birthday: ''
      }
    }
  },
  watch: {
    edit: {
      handler(n) {
        if (Object.keys(n)) {
          this.userInfo.nick_name = n.nick_name
          this.userInfo.avatar = n.avatar
          this.userInfo.birthday = n.birthday
        }
      },
      immediate: true
    }
  },
  // mounted() {
  //   let info = this.$storage.getStorage('userInfo') || { }
  //   this.userInfo.nick_name = info.nick_name
  //   this.userInfo.avatar = info.avatar
  //   this.userInfo.birthday = info.birthday
  // },
  methods: {
    onChooseAvatar(event) {
      uploadSync(event.detail.avatarUrl).then(async image_url => {
        this.userInfo.avatar = image_url
      })
    },
    onClose() {
      if (this.isClose) {
        this.$emit("update:isShow", false)
      }
    },
    userNameInput(e) {
      this.userInfo.nick_name = e.detail.value.slice(0, 10)
    },
    async onSubmit() {
      let { nick_name , avatar, birthday } = this.userInfo
      if (!avatar) {
        uni.showToast({
          title: '请上传头像',
          icon: 'none'
        })
        return false
      }
      if (!nick_name) {
        uni.showToast({
          title: '请填写昵称',
          icon: 'none'
        })
        return false
      }
      if (!birthday) {
        uni.showToast({
          title: '请选择生日',
          icon: 'none'
        })
        return false
      }
      var regex = /^(?:202[0-4]|20[01][0-9]|[1-19]\d{3})-(0[1-9]|1[0-2])-(?:0?[1-9]|[12][0-9]|3[01])$/g;
      if (!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(birthday) || !regex.test(birthday)) {
        uni.showToast({
            title: '请输入正确的日期格式（例如：2000-01-02）',
            icon: 'none',
            duration: 3000
        });
        // 防止删除时候不触发页面更新
        this.$nextTick(() => {
          this.userInfo.birthday = ''
        })
        return false
      }
      const { code, data } = await postUserUpdate({ ...this.userInfo, birth_day: birthday})
      if (code === 1000) {
        let info = this.$storage.getStorage('userInfo')
        this.$storage.setStorage('userInfo', { ...info, ...data})
        this.$emit('on-success', { ...info, ...data})
        this.$emit("update:isShow", false)
      }
    }
  },
  
  created() {
  }
}
</script>
<style lang="scss" >
.wrapper {
  width: 750rpx;
  // width: 690rpx;
  // margin: 0 auto;
  height: 1030rpx;
  // border-radius: 10rpx;
  // overflow: hidden;
  padding-top: 40rpx;
  background: #FFFFFF;
  font-family: pf_regular;
  .title {
    font-weight: 400;
    font-size: 40rpx;
    color: #000000;
    line-height: 47rpx;
    text-align: center;

  }
  .close {
    position: absolute;
    width: 36rpx;
    height: 36rpx;
    top: 32rpx;
    right: 32rpx;
  }
  .avatar {
    width: 176rpx;
    height: 176rpx;
    display: block;
    margin: 106rpx auto 0;
    border-radius: 176rpx;
    .avatar_img {
      border-radius: 176rpx;
      width: 176rpx;
      height: 176rpx;
    }
  }
  .txt {
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    line-height: 33rpx;
    text-align: center;
    margin-top: 16rpx;
  }
  .input {
    width: 590rpx;
    margin: 76rpx auto 0;
    line-height: 84rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 84rpx;
    text-align: left;
    position: relative;
    &:after {
      content: '';
      width: 100%;
      height: 4rpx;
      position: absolute;
      left: 0;
      bottom: 0;
      background: #000000;
      border-radius: 22rpx 22rpx 22rpx 22rpx;
    }
    .input_txt {
      text-align: right;
      height: 84rpx;
       -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
  -webkit-touch-callout: none; /* Disable callouts for text */
    }
    .birth {
      flex-direction: row-reverse;
    }

  }
  .btn {
    width: 590rpx;
    height: 96rpx;
    background: #000000;
    border-radius: 86rpx 86rpx 86rpx 86rpx;
    font-weight: 600;
    line-height: 96rpx;
    font-family: pf_bold;
    margin: 68rpx auto 0;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
  }
}

</style>